<template>
  <div class="page">
    <navTab class="home_nav"> <div slot="content">购物街</div></navTab>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="swiper_item"
        v-for="item in banners.list"
        :key="item.id"
      >
        <a :href="item.link">
          <img :src="item.image" alt="" />
        </a>
      </van-swipe-item>
    </van-swipe>
    <Recommend :recommends="recommends.list"></Recommend>
    <tabControl class="tabControl" :tabList="tabList" @tabClick="tabClick" />
    <!-- 商品列表 -->
    <goodsList :goodsList="goods[countent].list"></goodsList>
  </div>
</template>

<script>
import { getMultidata, getHomeGoods } from "../../api/home";
import navTab from "@/components/common/navbar.vue";
import Recommend from "@/components/common/home_recommend.vue";
import tabControl from "@/components/content/tabControl.vue";
import goodsList from "@/components/content/goods/goodList.vue";
export default {
  data() {
    return {
      banners: {},
      recommends: {},
      tabList: ["流行", "新款", "精选"],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      countent: "pop",
    };
  },
  components: {
    navTab,
    Recommend,
    tabControl,
    goodsList,
  },
  created() {
    this.getMultidataList();
    this.getHomeGoodsList("pop");
    this.getHomeGoodsList("new");
    this.getHomeGoodsList("sell");
  },
  methods: {
    // 请求轮播图数据
    getMultidataList() {
      getMultidata().then((res) => {
        console.log(res);
        this.banners = res.data.banner;
        this.recommends = res.data.recommend;
      });
    },
    // 请求商品数据
    getHomeGoodsList(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        const list = res.data.list;
        this.goods[type].list.push(...list);
      });
    },
    tabClick(index) {
      console.log(index);
      if (index === 0) {
        this.countent = "pop";
      } else if (index === 1) {
        this.countent = "new";
      } else {
        this.countent = "sell";
      }
    },
  },
};
</script>


<style lang='less' scoped>
.page {
  padding-top: 44px;
  padding-bottom: 44px;
}
.home_nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  background-color: var(--color-tint);
  box-shadow: 10px 10px 10px 0.5;
}
.tabControl {
  position: sticky;
  top: 44px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
</style>